<!--
 @Description:我的钱包
 @author:张静
 @createTime: 2022-7-6 5:52:31 ?F10: PM?
 -->
<template>
	<view>
		<zx-nav title="我的钱包" bg="#fff" fixedTop noHoldHeight></zx-nav>
		<mescroll-body ref="mescrollRef" :top="topH" @init="mescrollInit" @down="downCallback" :up="upOption" :down="downOption">
			<view class="main">
				<view class="account">
					<image :src="`${assetsPath}/walletbg.png`" mode="widthFix"></image>
					<view class="flex justify-between">
						<view>
							<view>账户余额</view>
							<view class="price">{{ userInfo.money }}</view>
						</view>
						<view class="tip" v-if="userInfo.txz_money > 0">
							<view>提现中</view>
							<view class="price">{{ userInfo.txz_money }}</view>
						</view>
					</view>
				</view>
				<view class="card mt28">
					<u-cell-group :border="false">
						<u-cell
							title="账单明细"
							:isLink="true"
							:rightIconStyle="{
								fontSize: '14px'
							}"
							:titleStyle="{
								padding: '6px 0'
							}"
							url="/pages/mine/bill"
						></u-cell>
						<u-cell
							:isLink="true"
							:rightIconStyle="{
								fontSize: '14px'
							}"
							:titleStyle="{
								padding: '6px 0'
							}"
							url="/pages/mine/withdrawallist"
						>
							<view slot="title" style="padding: 6px 0;">
								<text>提现明细/</text>
								<text style="color: #f00">收款</text>
							</view>
						</u-cell>
						<u-cell
							title="提现"
							:isLink="true"
							:border="false"
							:rightIconStyle="{
								fontSize: '14px'
							}"
							:titleStyle="{
								padding: '6px 0'
							}"
							url="/pages/mine/withdrawal"
						></u-cell>
					</u-cell-group>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
import { mapState, mapMutations, mapActions } from 'vuex';
export default {
	data() {
		return {
			money: '0.00',
			downOption: {
				auto: false // 不自动加载
			},
			upOption: {
				empty: {
					use: false
				},
				use: false,
				auto: false // 不自动加载
			}
		};
	},
	computed: {
		...mapState(['userInfo', 'CustomBar']),
		topH() {
			return this.CustomBar + +uni.upx2px(20) + 'px';
		}
	},
	mixins: [MescrollMixin],
	methods: {
		...mapActions(['getUserInfo']),
		downCallback(mescroll) {
			this.getUserInfo().then(() => {
				this.mescroll.endSuccess(0, false);
			});
		}
	}
};
</script>

<style lang="scss">
.account {
	position: relative;
	image {
		display: block;
		width: 100%;
	}
	& > view {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		padding: 100upx 56upx 0;
		color: #fff;
		font-size: 32upx;
		font-weight: 500;
		line-height: 45upx;
		.price {
			font-size: 60upx;
			line-height: 84upx;
		}
		.tip {
			font-size: 28upx;
			.price {
				font-size: 40upx;
			}
		}
	}
}
</style>
